<template>
  <div class="home">
    <TopHead title="SFA" r-ico="iconfont icon-user">
      <router-link to="/user" slot="r" class="icon iconfont icon-user"></router-link>
    </TopHead>
    <div class="date-wrap">{{getYearMonth}}</div>
    <div class="pie-container">
      <Pie :flag="true" :val="yeji.val1" tit="当月进度"></Pie>
      <Pie :flag="true" :val="yeji.val2" tit="销售额度"></Pie>
      <Pie :flag="false" :val="yeji.val3" tit="月销售量"></Pie>
    </div>
    <!-- 9宫格 -->
    <div class="menu">
      <div class="menu-item" v-for="i in this.menudata" :key="i.url"> 
        <router-link :to="i.url">
          <img src="../assets/img/ddzt.png" alt="">
        <span> {{i.menuName}} </span>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import TopHead from '@/components/TopHead.vue'
import Pie from '@/components/Pie.vue'
import service from '@/service/index.js'




export default {
  name: 'home',
  data(){
    return {
      yeji: null,
      menudata:[
  { menuName: "公司通告", imgUrl: "../assets/img/ddzt.png", "url": "/notice" },
  { menuName: "进店拜访", imgUrl: "../assets/img/ddzt.png", "url": "/visitshop" },
  { menuName: "电话订单", imgUrl: "@/assets/img/dhdd.png", "url": "/phoneorder" },
  { menuName: "订单状态", imgUrl: "@/assets/img/ddzt.png", "url": "/orders" },
  { menuName: "培训资料", imgUrl: "@/assets/img/pxzl.png", "url": "/training" },
  { menuName: "消息中心", imgUrl: "@/assets/img/xxzx.png", "url": "/message" },
  { menuName: "新增门店", imgUrl: "@/assets/img/xzmd.png", "url": "/addedshop" },
  { menuName: "同步数据", imgUrl: "@/assets/img/tbsj.png", "url": "/asyncdata" }
],
    }
  },
  created(){
      service.getUserProgress()
      .then(res=>{
        this.yeji = res.data;
      })
  },
  methods:{
    
  },
  
  computed:{
    getYearMonth(){
      var t = new Date();
      return `${t.getFullYear()}年${t.getMonth()+1}月`
    }
  },

  components: {
    TopHead,
    Pie
  }
}
</script>

<style lang="scss" scoped>
  .home{
    background-color: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
    h2{
      font-size: px2rem(30)
    }
    .date-wrap{
      font-size: px2rem(45);
      line-height: px2rem(100);
      text-align: center;

    }
    .pie-container{
      display: flex;
      justify-content: space-around;
    }
    .menu{
      padding: px2rem(40) px2rem(30) 0 px2rem(30);
      height: 100%;
      flex: 1;
      display: flex;
      flex-flow: row wrap;
      align-content: stretch;
      align-items: stretch;
      .menu-item{
        // flex: 1 1 30%;
        width: 33%;
        border-right: 1px solid #ccc;
        border-top: 1px solid #ccc;
        font-size: px2rem(30);
        
        &:nth-child(3n){
          border-right:none;
        }

        img{
          width: px2rem(55);
          height: px2rem(55);
        }
        a{
          width: 100%;
          height: 100%;
          display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        }
      }
    }
  }
 
</style>

